<template>
  <div class="fileUploadBox">
    <Upload
      v-model:file-list="fileList"
      class="fileUploader"
      name="file"
      :accept="accept"
      :action="uploadApiUrl"
      :headers="headers"
      :data="data"
      :maxCount="maxCount"
      :multiple="multiple"
      @change="handleChange"
    >
      <a-button>
        <span class="icon-[mdi--arrow-expand-up]"></span>
        上传文件
      </a-button>
    </Upload>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'FileUpload',
});
import { useAccessStore } from '@vben/stores';
import { Upload, message } from 'ant-design-vue';
import type { UploadChangeParam } from 'ant-design-vue';
import { uploadApiUrl } from '#/api/index';
import { ref, computed, onMounted, watch } from 'vue';

const fileList = ref<any[]>([]);
const loading = ref<boolean>(false);

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    },
  },
  data: {
    type: Object,
    default: () => {
      return {
        biz: 'file',
      };
    },
  },
  accept: {
    type: String,
    default: '',
  },
  maxCount: {
    type: Number,
    default: 1,
  },
  multiple: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:modelValue']);

onMounted(() => {});

watch(
  () => props.modelValue,
  (newValue) => {
    console.log('props.modelValue', props.modelValue);
    if (!props.modelValue) return;
    if (props.maxCount > 1) {
      console.log('maxCount', props.maxCount);
      // 未扩展
    } else {
      console.log(props.modelValue.ossPath);
      if (props.modelValue.ossPath && fileList.value.length < 1) {
        fileList.value.push(props.modelValue);
      }
    }
  },
  { once: true },
);

// 请求头
const headers = computed(() => {
  return {
    Authorization: useAccessStore()?.accessToken as string,
  };
});

// 上传文件变动
const handleChange = (info: UploadChangeParam) => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    message.success('上传成功');

    console.log(info);

    updateData();
    console.log('customRequest', fileList.value);
  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('上传失败，请稍后重试');
  }
};

// 根据url地址获取文件名
const getFileNameFromURL = (url: string) => {
  const urlObj = new URL(url);
  const path = urlObj.pathname;
  const fileName = path.split('/').pop();
  console.log(fileName);
  return fileName;
};

// 更新组件数据
const updateData = () => {
  if (fileList.value.length == 0) return;
  if (props.maxCount == 1) {
    let flieObj = fileList.value[0]?.response?.data;
    flieObj.isChange = true;
    emit('update:modelValue', flieObj);
  } else {
    emit('update:modelValue', fileList.value);
  }
};

const beforeUpload = (file: any) => {
  console.log('customRequest', file);
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};
</script>

<style lang="scss" scoped></style>
